<cfmodule template="../../tag/layout.cfm" bodyIsEasyUILayout="false">
<cfscript>
	if( structKeyExists(rc, "id")  && rc.id > 0 ){
		id = rc.id;
	}else{
		id = 0;
	}
	
	if( structKeyExists(rc, "categorytypeid")  && rc.categorytypeid > 0 ){
		categorytypeid = rc.categorytypeid;
	}else{
		categorytypeid = 0;
	}
</cfscript>

<form method="post" class="form">
  <div title="基本信息" style="padding:10px">
    <table class="table" id="table" name="table" width="100%">
      <tbody>
        <tr>
          <th>编号</th>
          <td><input name="id" readonly /></td>
          <th>所属栏目</th>
          <td><input id="categoryName" name="categoryName" readonly>
            <input name="categoryid" type="hidden" value="<cfoutput>#categoryid#</cfoutput>"></td>
        </tr>
        <tr>
          <th>标题</th>
          <td><input id="subject" name="subject" class="easyui-validatebox" data-options="required:true"/></td>
          <th>过期时间</th>
          <td><input class="easyui-datebox" name="expiry"  data-options="required:true"/></td>
        </tr>
        <tr>
          <th>广告类型</th>
          <td colspan="3">
          	<a href="#" class="easyui-linkbutton" id="textads"  data-options="toggle:true,group:'g1',iconCls:'icon-large-smartart',iconAlign:'top'">文本广告</a>
          	<a href="#" class="easyui-linkbutton" id="imageads" data-options="toggle:true,group:'g1',iconCls:'icon-large-picture',iconAlign:'top'">图片广告</a>
          	&nbsp;&nbsp; 或 &nbsp;&nbsp;
          	<a href="#" class="easyui-linkbutton" id="materialAdd" data-options="iconCls:'icon-add',iconAlign:'top'">物料管理</a>
          </td>
        </tr>
        <tr>
      	<th>宽度</th>
          <td><input name="width" id="width" class="easyui-numberspinner"  value="0"  style="width:80px;" /></td>
          <th>高度</th>
          <td><input name="height" id="height" class="easyui-numberspinner" value="0"  style="width:80px;" /></td>
        </tr>
        <tr>
          <th>物料提示</th>
          <td colspan="3">
			<div id="msg">请选择广告类型，然后进行广告预览！</div>
          </td>
        </tr>
        <tr>
          <th>模板提示</th>
          <td colspan="3">
			<div id="templatemsg">你选择的广告模板！</div>
          </td>
        </tr>
        <tr>
          <td colspan="4">
          	<div style=" text-align:center; padding:5px;">
          	<a href="#" id="preview" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'">效果预览</a>
          	</div>
          </td>
        </tr>
        
      </tbody>
    </table>
    <input type="hidden" name="templateid" id="templateid" value="0">
    <input type="hidden" name="materialids" id="materialids" class="easyui-validatebox" data-options="required:true">
    <input type="hidden" name="type" id="type">
  </div>
</form>

</cfmodule>
<script type="text/javascript">
	function preview(){
		if( $("#type").val().trim().length > 0 && $("#materialids").val().trim().length > 0 ) {
			var url = '?action=ads.preview&type=' + $("#type").val() +'&checkedids='+$("#materialids").val() + '&width=' + $('#width').val() + '&height=' + $('#height').val() + '&templateid=' + $('#templateid').val();
			var tp = $('#templateid');
			var dialog = parent.fw.modalDialog({
		        title: '广告预览',
		        height:800,
		        width:800,
		        url: url,
		        buttons: [
		        {
		            text: '确定',
		            handler: function() {
		                dialog.find('iframe').get(0).contentWindow.submitForm(dialog,tp);
		            }
		        },{
		            text: '关闭窗口',
		            handler: function() {
		                dialog.find('iframe').get(0).contentWindow.closeDialog(dialog);
		            }
		        }]
		    });
			
		}else{
			$.messager.alert('提示','请选择广告物料！','warning');
		}
	}
	
	
	$("#preview").on('click',preview);
	
	function showMaterial(){
		if( $("#type").val().trim().length > 0 && $("#materialids").val().trim().length > 0 ) {
			var arrMaterial = $("#materialids").val().split(',');
			if($("#type").val() == 0){
				var msg = "你选择了 " + arrMaterial.length +" 个文本广告类型物料！";				
			}else{
				var msg = "你选择了 " + arrMaterial.length +" 个图片广告类型物料！";
			}
			$("#msg").html(msg);
		}
	}
	
	
	$("#templateid").click(function(){
	   //获取模板
		$.ajax({
		    type: "POST",
		    url: "?action=adstemplate.get",
		    data: {
		        id:$('#templateid').val()
		    }
		}).done(function(result) {
			var typename = '';
			if(result.type == 0){
				typename = '文本类型';
			}else{
				typename = '图片类型';
			}
			var msg ='你选择了 ' + typename + ' 的 ' + result.subject + ' 广告，可进行广告预览！';
			$('#templatemsg').html(msg);
		}, 'json');
	});
	
	
	$("#materialids").on('click',showMaterial);

	var mertialFun = function() {
	    var dialog = parent.fw.modalDialog({
	        title: '广告物料',
	        height:800,
	        width:800,
	        url: '?action=adsmaterial.form',
	        buttons: [{
	            text: '关闭窗口',
	            handler: function() {
	                dialog.find('iframe').get(0).contentWindow.closeDialog(dialog);
	            }
	        }]
	    });
	};
	
	$('#materialAdd').on('click',mertialFun);
	
	
	$('#textads').on('click',getTxtMaterial);
	
	function getTxtMaterial(){
		var materialids =$("#materialids");
		var checkedids= materialids.val();
		$("#type").val(0);
		var dialog = parent.fw.modalDialog({
	        title: '选择广告物料',
	        url: '?action=adsmaterial.lists&type=0&checkedids=' + checkedids,
	        buttons: [
	        {
	            text: '确定',
	            handler: function() {
	                dialog.find('iframe').get(0).contentWindow.submitForm(dialog, materialids);
	            }
	        },{
	            text: '关闭窗口',
	            handler: function() {
	               dialog.find('iframe').get(0).contentWindow.closeDialog(dialog);
	            }
	        }]
	    });
	}
	
	$('#imageads').on('click',getImageMaterial);
	
	function getImageMaterial(){
		var materialids =$("#materialids");
		var checkedids= materialids.val();
		$("#type").val(1);
		var dialog = parent.fw.modalDialog({
	        title: '选择广告物料',
	        url: '?action=adsmaterial.lists&type=1&checkedids=' + checkedids,
	        buttons: [
	        {
	            text: '确定',
	            handler: function() {
	                dialog.find('iframe').get(0).contentWindow.submitForm(dialog, materialids);
	            }
	        },{
	            text: '关闭窗口',
	            handler: function() {
	               dialog.find('iframe').get(0).contentWindow.closeDialog(dialog);
	            }
	        }]
	    });
	    
	}
	
	var closeDialog = function($dialog) {
		$dialog.dialog('destroy');
	}
	
	var submitNow = function($dialog, $grid, $pjq) {
		var url;
		if ($(':input[name="id"]').val().length > 0) {
			url = '?action=ads.update'; //更新操作
		} else {
			url = '?action=ads.save';	//新增操作
		}

		$.post(url, fw.serializeObject($('form')), function(result) {
			if (result) {
				$grid.datagrid('reload');
				$dialog.dialog('destroy');
			}
		}, 'json');
	};
	
	
	var submitForm = function($dialog, $grid, $pjq) {
//		alert($('form').form('validate'));
//		alert( $.toJSON( fw.serializeObject($('form')) ));

		if ($('form').form('validate')) {
			//如果广告类型与物料类型不一致，做提示
			
			$.ajax({
		    type: "POST",
		    url: "?action=adstemplate.get",
		    data: {
		        id:$('#templateid').val()
		    }
		}).done(function(result) {
			if(result.type == $('#type').val() ){
				submitNow($dialog, $grid, $pjq);
			}else{
				$.messager.alert('提示','模板与物料类型不一致，请重新选择！','warning');
			}
		}, 'json');
			
			
		}
	};
	
	$(function(){
		
		
		//获取当前的分类
		$.ajax({
		    type: "POST",
		    url: "?action=category.get",
		    data: {
		        id:<cfoutput>#categoryid#</cfoutput>
		    }
		}).done(function(result) {
			$("#categoryName").val(result.text);
		}, 'json');
		
		$.ajax({
		    type: "POST",
		    url: "?action=ads.get",
		    data: {
		        id:<cfoutput>#id#</cfoutput>
		    }
		}).done(function(result) {
			$('form').form('load', result); 
			//绑定上传操作
			parent.$.messager.progress('close');
			arrMaterialids = result.materialids.split(',');
			if(result.type == 0){
				msg = "你选择的是 文本类型，包含 " + arrMaterialids.length +" 个广告物料，可进行广告预览！";
				$('#textads').linkbutton('select');
				$('#imageads').linkbutton('unselect');
				$('#msg').html(msg);
			}else{
				msg = "你选择的是 图片类型，包含 " + arrMaterialids.length +" 个广告物料，可进行广告预览！";
				$('#textads').linkbutton('unselect');
				$('#imageads').linkbutton('select');
				$('#msg').html(msg);
			}
			
			$('#templateid').click();
			
		}, 'json');
	})
	
</script>	 
